<template>
    <div class="add-video">
      <el-form :model="form" class="my-form" label-width="100px" :disabled="disabled">

        <el-form-item label="商品名称" required>
          <el-input clearable v-model="form.product_name" style="width: 300px;" readonly maxlength="50" placeholder="请输入商品名称" />
        </el-form-item>
        <el-form-item label="商品CODE" required>
          <el-input clearable v-model="form.code" style="width: 300px;" maxlength="50" readonly  />
        </el-form-item>
        <el-form-item label="商品封面" required>
          <UploadFile @imgUploadSuc="imgUploadSuc" :p-img-url="form.font_view" :type="'image'" :tip="'建议封面图尺寸 600px*350px'">
          </UploadFile>
        </el-form-item>


      </el-form>
      <el-form-item class="btn-box">
        <el-button @click="back">返回</el-button>
        <el-button type="primary" @click="submitProduct" :disabled="disabled">提交</el-button>
      </el-form-item>
    </div>
  </template>
  
  <script setup name="ProductAdd">
  import { reactive, ref, onMounted } from 'vue'
  import { useRouter, useRoute } from 'vue-router';
  import { useTabNar } from '@/stores/tabnar';
  import { useCommonStore } from '@/stores';
  import UploadFile from './components/UploadFile.vue';
  import { productAdd,productDetail,productUpdate } from '@/api/productManage/productManage';
  import { ElLoading, ElMessage } from 'element-plus';
  import { isEmpty } from 'lodash-es';
  
  //data
  const router = useRouter()
  const route = useRoute()
  const tabNar = useTabNar()

  const form = reactive({
    product_no: '',//商品编号
    code: '',
    product_name: '',//商品名称
    font_view: '',//图片地址
    id: ''
  })
  const fileList = ref([]);
  const disabled = ref(false)
  const isIndeterminate = ref(true);
  const checkAll = ref(false);
  const isEdit = ref(false);
  const loadingData = ref(false);
  const is_standard =  reactive({
    'is_standard' : { 1 : '正常' , 2 : '异常'},
  })
  
  // methods
  const back = () => {
    // 返回上一页
    router.go(-1)
    tabNar.deleteTab(route)
  }
  
  const imgUploadSuc = (image_path) => {
    form.cover = image_path
  }

  const submitProduct = async () => {
    if (!form.product_name) {
      return ElMessage.error("请填写商品名称");
    } else if (!form.font_view) {
      return ElMessage.error("请上传图片文件");
    }
   
    const loading = ElLoading.service({
      lock: true,
      text: 'Loading',
      background: 'rgba(0, 0, 0, 0.7)',
    })
    let res = null;
    if (isEdit.value) {
      res = await productUpdate(form)
    } else {
      res = await productAdd(form)
    }
    loading.close()
    if (res.code === 1000) {
      ElMessage.success("提交成功")
      disabled.value = true;
      setTimeout(() => {
        router.go(-1)
      }, 1000);
    } else {
      ElMessage.warning("提交失败")
    }
  }
  
  const loadProductDetail = async () => {
    loadingData.value = true;
    const res = await productDetail(route.query.id);
    loadingData.value = false;
    if (res.code === 1000) {
        form.product_no = res.data.product_no;
        form.code = res.data.code;
        form.product_name = res.data.product_name;
        form.font_view = res.data.font_view_img.uri;
        form.id = res.data.id.uri;
    }


  }
  // life cycle
  
  onMounted(async () => {

    if (route.query.id ) {
      isEdit.value = true;
    }

    loadProductDetail()
  })
  </script>
  
  <style lang="less" scoped>
  .check-all {
    margin-right: 30px;
  }
  
  .add-video {
    margin: 20px;
  }
  
  .btn-box {
    margin-top: 50px;
  
    :deep(.el-form-item__content) {
      display: flex;
      justify-content: center;
    }
  }
  </style>